<template>
  <div id="tags-view-container" class="tags-view-container">
    <mine-scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link v-for="(tag,index) in visitedViews" :key="tag.path"
                   :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }">
        <el-dropdown trigger="contextmenu">
        <span class="el-dropdown-link">
        <el-tag class="tag-view-tag" :ref="setItemRef" closable checked :hit="true" effect="plain"
                @click="handleTagClick(index)" @close.prevent.stop="handleTagClose">{{ tag.title }}
        </el-tag>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="refreshSelectedTag">刷新页面</el-dropdown-item>
              <el-dropdown-item>关闭当前</el-dropdown-item>
              <el-dropdown-item @click="closeOthersTags">关闭其它</el-dropdown-item>
              <el-dropdown-item @click="closeAllTags">关闭所有</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span class="el-icon-close"/>
      </router-link>
    </mine-scroll-pane>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";

import MineScrollPane from "@/components/tags/mine-scroll-pane";
import {store} from "@/store";

const {watch} = require("vue");

export default {
  name: "mine-tag-view",
  components: {MineScrollPane},
  setup() {
    const left = ref(0)
    const tagsItem = []
    const menuVisible = ref(false)
    const visitedViews = ref([])
    const route = useRoute()
    // 当前属性
    let i = 0;
    const handleScroll = () => {
    }
    /**
     * 切换路由
     * @param index
     */
    const handleTagClick = (index) => {
      if (index !== i) {
        let resetTags = tagsItem[i]
        let resetDom = resetTags.$el
        let resetClazz = resetDom.getAttribute("class")
        resetDom.setAttribute("class", resetClazz.replace("el-tag--dark", "el-tag--plain"))
      }

      i = index
      let tags = tagsItem[index]
      let dom = tags.$el
      let clazz = dom.getAttribute("class")
      dom.setAttribute("class", clazz.replace("el-tag--plain", "el-tag--dark"))
    }
    const handleTagClose = () => {
    }
    const openMenu = () => {
      // menuVisible.value = true
    }
    const refreshSelectedTag = () => {
    }
    const closeOthersTags = () => {
    }
    const closeAllTags = () => {
    }
    const setItemRef = el => {
      if (el) {
        tagsItem.push(el)
      }
    }
    const initVisitedViews = () => {
      visitedViews.value = store.state.tagsView.visitedViews
    }

    onMounted(() => {
      initVisitedViews()
      // handleTagClick(0)
    })
    watch(() => route.matched, (newVal, oldVal) => {
      //添加route信息到store中，用于展示tagsView
      store.dispatch("addView", route)
      //选中
      // let visitedViewsVal = visitedViews.value
      // for (let i in visitedViewsVal) {
      //   let item = visitedViewsVal[i]
      //   if (route.fullPath === item.fullPath) {
      //     handleTagClick(i * 1)
      //     break
      //   }
      // }
    })
    return {
      menuVisible,
      visitedViews,
      setItemRef,
      openMenu,
      handleScroll,
      handleTagClose,
      handleTagClick,
      refreshSelectedTag,
      closeOthersTags,
      closeAllTags
    }
  }

}
</script>

<style lang="scss">

.tags-view-wrapper {
  display: flex;
  flex-direction: row; /* 子元素横向排列 */
  align-items: center;
  box-shadow: 1px 1px 1px #e5e6e7;
  border-bottom: 2px;

  .tag-view-tag {
    margin-left: 0.5rem;
  }
}

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.el-dropdown-menu {
  width: 80px;

  .el-dropdown-menu__item {
    font-size: 12px;
    line-height: 16px;
  }
}

</style>
